<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <!-- <script src="../boot/login.boot.js"></script> -->

    <link rel="stylesheet" href="../static/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/layout/login/login_layout.css">


    <script src="../static/js/jquery.js"></script>
    <script src="../static/layout/login/login_common.js"></script>
    <script src="../static/js/pageCommon.js"></script>


    <script src='../static/plugins/iview/vue.min.js'></script>
    <script src='../static/plugins/iview/iview.js'></script>
    <link rel="stylesheet" href="register.css">


    <div class="container" id="app">

        <div id="headwrap" class=" clearfix">


            <div class="head-left">

                <div class="head-right-item" style="overflow: hidden">
                    <img class="loginimg" src="../static/images/main/LOGO.svg" />
                </div>

                <div class="head-right-item head-title fc333">江苏梦兰神彩权限管理系统</div>
                <div class="head-right-item head-subtitle fc666">用户登录</div>

            </div>


            <div class="head-right inlinline-block-container">




                <div>
                    <i class="fa fa-user-circle-o"></i>
                    <span>
                         <a href="help.html" target="_blank">帮助</a>
                     </span>
                </div>

                <div>
                    <i class="fa fa-user-circle-o"></i>
                    <span>下载</span>
                    <i class="fa fa-angle-down"></i>
                    <ul>
                        <li>
                            <a href="">谷歌浏览器下载</a>
                        </li>
                        <li>
                            <a href="">IE浏览器下载</a>
                        </li>

                    </ul>
                </div>







            </div>


        </div>

        <div id="mainwrap" class=" clearfix">

            <div class="sc-register mainContent clearfix">
                <div class="sc-register-content">
                    <div class="sc-register-name">
                        <span></span> 用户注册
                        <div class="fr">已有帐号? <a href="login.html">去登陆</a></div>
                    </div>


                    <Alert type="warning" show-icon>
                        警告提示文案
                    </Alert>

                    <Row id="steps_wrap" v-bind:class="{'mt_20':true,'mb_20':true}">
                        <i-col span="24">
                            <Steps :current="step">
                                <Step title="基本信息" content="请填写基本信息"></Step>
                                <Step title="手机验证" content="手机短息进行验证"></Step>
                                <Step title="密码设置" content="设置用户密码"></Step>
                            </Steps>
                        </i-col>
                    </Row>




                    <i-form :model="formData" label-position="right" :label-width="200">
                        <Row v-if="step==0">
                            <i-col span="20">
                                <Form-item label="企业名称：">
                                    <i-input v-model="formData.enterpriseName" size="large" placeholder="请填写企业名称"></i-input>

                                </Form-item>
                            </i-col>
                        </Row>
                        <Row v-if="step==0">
                            <i-col span="20">
                                <Form-item label="统一社会信用代码：">
                                    <i-input v-model="formData.creditCode" size="large" placeholder="请填写统一社会信用代码"></i-input>
                                </Form-item>
                            </i-col>

                        </Row>
                        <Row v-if="step==0">
                            <i-col span="13">
                                <Form-item label="生产经营地址：">
                                    <i-select placeholder="生产经营地址">
                                        <i-option v-bind:value="addr.value" v-for="addr in AddressList">{{addr.name}}</i-option>
                                    </i-select>
                                </Form-item>
                            </i-col>
                            <i-col span="1" style="text-align: center">&nbsp;</i-col>
                            <i-col span="6">
                                <i-input v-model="formData.addressDetail" placeholder="详细地址" />
                            </i-col>
                        </Row>

                        <Row v-if="step==0">
                            <i-col span="24">
                                <Form-item label="上传图片附件：">


                                    <div class="demo-upload-list" v-for="item in uploadList">
                                        <template v-if="item.status === 'finished'">
                                                <img :src="item.url">
                                                <div class="demo-upload-list-cover">
                                                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                                </div>
                                            </template>
                                        <template v-else>
                                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                            </template>
                                    </div>
                                    <Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload"
                                        multiple type="drag" action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block;width:120px;">
                                        <div style="width: 120px;height:120px;line-height: 120px;">
                                            <Icon type="upload" size="60" style="margin-top:26px;"></Icon>
                                        </div>

                                    </Upload>
                                    <div class="upload-tip">
                                        <p>
                                            上传加盖公章的营业执照扫描件<br/> 支持.jpg .jpeg .png .bmp格式照片，<br/> 大小不超过5M
                                        </p>
                                    </div>
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                                    </Modal>




                                </Form-item>
                            </i-col>
                        </Row>


                        <Row v-if="step==1">
                            <i-col span="20">
                                <Form-item label="手机号：">
                                    <i-input v-model="formData.enterpriseName" size="large" placeholder="请输入手机号码"></i-input>
                                </Form-item>
                            </i-col>
                        </Row>
                        <Row v-if="step==1">
                            <i-col span="20">
                                <Form-item label="验证码：">
                                    <i-input v-model="formData.creditCode" size="large" placeholder="请输入验证码"></i-input>
                                    <span class="right_icon">
                                            获取验证码
                                    </span>
                                </Form-item>
                            </i-col>

                        </Row>


                        <Row v-if="step==2">
                            <i-col span="20">
                                <Form-item label="输入用户名：">
                                    <i-input v-model="formData.enterpriseName" size="large" placeholder="请输入用户名"></i-input>
                                </Form-item>
                            </i-col>
                        </Row>
                        <Row v-if="step==2">
                            <i-col span="20">
                                <Form-item label="输入密码：">
                                    <i-input v-model="formData.creditCode" size="large" placeholder="请输入密码"></i-input>
                                    <span class="right_icon">
                                            <i class="fa fa-eye"></i>
                                        </span>
                                </Form-item>
                            </i-col>

                        </Row>
                        <Row v-if="step==2">
                            <i-col span="20">
                                <Form-item label="再次输入密码：">
                                    <i-input v-model="formData.creditCode" size="large" placeholder="请再次确认您输入密码"></i-input>
                                    <span class="right_icon">
                                            <i class="fa fa-eye"></i>
                                        </span>
                                </Form-item>
                            </i-col>

                        </Row>

                        <Row v-if="step==2">
                            <i-col span="20">
                                <Form-item label="">
                                    <Radio label="twitter">
                                        <span>&nbsp;我已同意并已阅读</span>
                                        <a href="agreement.html">《某某某条款》</a>
                                    </Radio>
                                </Form-item>
                            </i-col>

                        </Row>

                        <Row v-if="step==3">
                            <i-col span="20">
                                <div class="register_success">
                                    <div class="success_logo">
                                        <img src="../static/images/login/sucess.jpg" alt="">
                                    </div>
                                    <p class="fb">您已注册成功</p>
                                    <p>欢迎使用xxxxxx系统</p>
                                    <p>您可通地手机验证码登录,手机扫码登录,帐号密码登录多种方式登录系统</p>
                                    <div class="mt_20">
                                        <i-button type="ivu-btn ivu-btn-primary" style="padding:5px 30px; letter-spacing:2px;" size='large'>进入首页</i-button>
                                    </div>
                                </div>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="20">
                                <Form-item label="">

                                    <div v-if="step==0">
                                        <i-button type="ivu-btn ivu-btn-primary" size='large' v-on:click.stop=saveAndNext(1)>保存并下一步</i-button>
                                        <i-button type="ivu-btn ivu-btn-default" size='large' v-on:click.stop=cancelAndprev() style="margin-left: 8px">取消</i-button>
                                    </div>
                                    <div v-if="step==1">
                                        <i-button type="ivu-btn ivu-btn-default" size='large' v-on:click.stop=cancelAndprev(1)>上一步</i-button>
                                        <i-button type="ivu-btn ivu-btn-primary" size='large' v-on:click.stop=saveAndNext() style="margin-left: 8px">保存并下一步</i-button>
                                    </div>

                                    <div v-if="step==2">
                                        <i-button type="ivu-btn ivu-btn-default" size='large' v-on:click.stop=cancelAndprev(1)>上一步</i-button>
                                        <i-button type="ivu-btn ivu-btn-primary" size='large' v-on:click.stop=saveAndNext() style="margin-left: 8px">确认注册</i-button>
                                    </div>

                                </Form-item>

                            </i-col>
                        </Row>





                    </i-form>




                </div>
            </div>
        </div>

        <div id="footerwrap" class="clearfix ">

        </div>

    </div>
    <script src="../static/js/jquery.backstretch.min.js"></script>
    <script scr="../static/js/pageCommon.js "></script>

    <script type="text/javascript ">
        //获取url参数公用方法
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }


        var app = new Vue({
            el: '#app',
            data: {
                formData: {
                    enterpriseName: '',
                    creditCode: ''
                },
                defaultList: [],
                AddressList: [{
                    value: 'beijing',
                    name: '江苏省/苏州市/工业园区'
                }, {
                    value: 'shanghai',
                    name: '江苏省/苏州市/工业园区'
                }],
                addressDetail: '展业路1号',
                model1: 'shanghai',
                defaultList: [{
                    'name': 'a42bdcc1178e62b4694c830f028db5c0',
                    'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                }],
                imgName: '',
                visible: false,
                uploadList: [],
                step: 0
            },
            mounted: function() {
                this.step = GetQueryString("step") || 0;
                this.uploadList = this.$refs.upload.fileList;
            },
            methods: {
                handleView(name) {
                    this.imgName = name;
                    this.visible = true;
                },
                handleRemove(file) {
                    // 从 upload 实例删除数据
                    const fileList = this.$refs.upload.fileList;
                    this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                },
                handleSuccess(res, file) {
                    // 因为上传过程为实例，这里模拟添加 url
                    file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                    file.name = '7eb99afb9d5f317c912f08b5212fd69a';
                },
                handleFormatError(file) {
                    this.$Notice.warning({
                        title: '文件格式不正确',
                        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                    });
                },
                handleMaxSize(file) {
                    this.$Notice.warning({
                        title: '超出文件大小限制',
                        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                    });
                },
                handleBeforeUpload() {
                    const check = this.uploadList.length < 5;
                    if (!check) {
                        this.$Notice.warning({
                            title: '最多只能上传 5 张图片。'
                        });
                    }
                    return check;
                },
                toLogin: function() {
                    window.location.href = "login.html ";
                },
                saveAndNext: function() {
                    var toStep = this.step + 1;
                    this.step = toStep > 4 ? 4 : toStep;
                    setTimeout(reSize, 0);
                },
                cancelAndprev: function(index) {
                    var toStep = this.step - 1;
                    this.step = toStep <= 0 ? 0 : toStep;
                    setTimeout(reSize, 0);
                }
            }
        });
    </script>

</body>

</html>